import { useEffect } from "react";
import styles from "./MapContainer.scss";
import AMapLoader from "@amap/amap-jsapi-loader";
import { message } from 'antd'
export default function MapContainer() {

    window._AMapSecurityConfig = {
        securityJsCode: '381dcb4d2b945aafceaa68e15d1cfc4a',
    }

    let map = null;

    useEffect(() => {
        AMapLoader.load({

            key: "66723f4235c6e23aa7b87a56432e81d2", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.ControlBar', 'AMap.CircleMarker', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    resizeEnable: true,
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [120.27079, 30.31163], // 初始化地图中心点位置
                });

                var toolbar = new AMap.ToolBar({
                    position: {
                        top: '100px',
                        right: '20px'
                    }
                }); //缩放工具条实例化
                map.addControl(toolbar);


                const scale = new AMap.Scale()
                map.addControl(scale)

                const controlBar = new AMap.ControlBar()
                map.addControl(controlBar)

                const position = new AMap.LngLat(120.27079, 30.31163); // Marker经纬度
                const marker = new AMap.Marker({
                    position: position,
                    // content: `<div> 标记点 📌 </div>`, // 将 html 传给 content
                    // offset: new AMap.Pixel(-13, -30), // 以 icon 的 [center bottom] 为原点
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
                    title: '千锋教育',
                    anchor: 'bottom-center' // 设置地图缩放的时候图标不动
                });
                /*
                    var marker = new AMap.Marker({
                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                        position: [116.405467, 39.907761],
                        anchor:'bottom-center'
                    });
                */
                // map.addControl(marker)
                // marker.setMap(map)
                map.add(marker);

                // 添加点标记的点击事件
                marker.on('click', () => {
                    message.info('您点击的是千锋教育')
                })

                var circle = new AMap.Circle({
                    center: new AMap.LngLat('120.27079', '30.31163'), // 圆心位置
                    radius: 1000,  //半径
                    strokeColor: "#F33",  //线颜色
                    strokeOpacity: 1,  //线透明度
                    strokeWeight: 3,  //线粗细度
                    fillColor: "#ee2200",  //填充颜色
                    fillOpacity: 0.35 //填充透明度
                });
                // mk.setMap(map)
                map.add(circle);

                // 生命周期
                map.on('complete', function () {
                    console.log("地图图块加载完毕！当前地图中心点为：" + map.getCenter());
                });



                // 检索
                const placeSearch = new AMap.PlaceSearch({
                    city: '021'
                })
                placeSearch.search('卫生间', function (status, result) {
                    let str = '<ol>'
                    for (let i = 0; i < result.poiList.pois.length; i++) {
                        console.log(result.poiList.pois[i]);
                        str += '<li>' + result.poiList.pois[i].address + '</li>'
                    }
                    str += '</ol>'
                    document.getElementById('res').innerHTML = str
                })



            })
            .catch((e) => {
                console.log(e);
            });

        return () => {
            map?.destroy();
        };
    }, []);

    return (
        <>
            <div
                id="container"
                className={styles.container}
            >

            </div>
            <div id="res"></div>
        </>
    );
}
